<template>
	<view class="pushTitle">
		<view class="start" style="">
			<view class="content">
				<view
					:style="{'background-color':(color||'blue'),'width':(width||'3')+'px','height':(height||'20')+'px'}">
				</view>
			</view>
			<view class="content">
				<view
					:style="{'background-color':(color||'blue'),'width':(width||'3')+'px','height':((height-5)||'15')+'px'}">
				</view>
			</view>
			<view class="content">
				<view
					:style="{'background-color':(color||'blue'),'width':(width||'3')+'px','height':((height-10)||'10')+'px'}">
				</view>
			</view>
		</view>
		<view style="font-size: 20px;padding: 0px 20px;">{{title}}</view>
		<view class="last" style="">
			<view class="content">
				<view
					:style="{'background-color':(color||'blue'),'width':(width||'3')+'px','height':(height||'20')+'px'}">
				</view>
			</view>
			<view class="content">
				<view
					:style="{'background-color':(color||'blue'),'width':(width||'3')+'px','height':((height-5)||'15')+'px'}">
				</view>
			</view>
			<view class="content">
				<view
					:style="{'background-color':(color||'blue'),'width':(width||'3')+'px','height':((height-10)||'10')+'px'}">
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'cf-title',
		props: {
			width: {
				type: Number,
				default: 3
			},
			height: {
				type: Number,
				default: 20
			},
			color: { //颜色
				type: String,
				default: 'blue'
			},
			title: { //标题
				type: String,
				default: '推荐商品'
			}
		},
		data() {
			return {}
		},
		//事件监听
		watch: {},
		onLoad() {},
		methods: {

		}
	}
</script>
<style lang="scss">
	.pushTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px;
	}

	.start {
		height: 20px;
		width: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.last {
		height: 20px;
		width: 30px;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.content {
		flex: 1;
		display: flex;
		justify-content: center;
	}
</style>
